<template>
  <div class="start-container">
    <el-carousel 
      :interval="3000" 
      height="100vh" 
      arrow="always" 
      trigger="click"
    >
      <el-carousel-item v-for="(img, index) in carouselImages" :key="index">
        <div class="carousel-content">
          <img :src="img" :alt="`Slide ${index + 1}`" class="carousel-image">
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 进入按钮 -->
    <div class="enter-button">
      <el-button 
        class="green-button"
        size="large" 
        @click="enterApp"
        round
      >
        立即体验
      </el-button>
    </div>
  </div>
</template>

<script>
// 导入本地图片
import tupian1 from '@/assets/images/start-page/shouye11.jpg';
import tupian2 from '@/assets/images/start-page/shouye22.jpg';
import tupian3 from '@/assets/images/start-page/shouye33.jpg';
import tupian4 from '@/assets/images/start-page/shouye44.jpg';

export default {
  data() {
    return {
      carouselImages: [tupian1, tupian2, tupian3, tupian4]
    };
  },
  methods: {
    enterApp() {
      this.$router.push('/login'); // 确保路由指向登录页面
    }
  }
};
</script>

<style scoped>
.start-container {
  position: relative;
  height: 100vh;
}

.carousel-content {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.enter-button {
  position: absolute;
  bottom: 45px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.green-button {
  background-color: #4CAF50; /* 绿色背景 */
  border-color: #4CAF50; /* 绿色边框 */
  color: black; /* 文字颜色改为黑色 */
}

.green-button:hover {
  background-color: #45a049; /* 鼠标悬停时的绿色背景 */
  border-color: #45a049; /* 鼠标悬停时的绿色边框 */
  color: black; /* 鼠标悬停时的文字颜色保持黑色 */
}
</style>
